import React from 'react';
import "./product.css"
import {Link} from "react-router-dom"
import Chart from "../../components/chart/Chart"
import { productData } from '../../dummyDate';
import {Publish} from '@material-ui/icons'

export default function Product() {
  return (
    <div className='Product'>
        <div className="productTitleContainer">
                <h1 className='productTitle'>Product</h1>
                <Link to="/newproduct">
                    <button className='productAddButton'>Create</button>
                </Link>
        </div>
        <div className="productTop">
            <div className="productTopLeft">
                <Chart data={productData} dataKey="Sales" title="Sales Performance"/>
            </div>
            <div className="productTopRight">
                <div className="productInfoTop">
                    <img 
                    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.aLXoQ-S7cbPVLMcC2NAyXQHaHa?pid=ImgDet&rs=1"
                     alt="" className="productInfoImg" />
                     <span className="productName">Apple Airpods</span>
                </div>
                <div className="productInfoBottom">
                    <div className="productInfoItem">
                        <span className="productInfoKey">id:</span>
                        <span className="productInfoValue">123</span>
                    </div>
                    <div className="productInfoItem">
                        <span className="productInfoKey">sales:</span>
                        <span className="productInfoValue">5123</span>
                    </div>
                    <div className="productInfoItem">
                        <span className="productInfoKey">active:</span>
                        <span className="productInfoValue">yes</span>
                    </div>
                    <div className="productInfoItem">
                        <span className="productInfoKey">in stock:</span>
                        <span className="productInfoValue">no</span>
                    </div>

                </div>
            </div>
        </div>
        <div className="productBottom">
            <form action="" className="productForm">
                <div className="productFormLeft">
                    <label htmlFor="">Product Name</label>
                    <input type="text" placeholder='Apple AirPod' />
                    <label htmlFor="">In Stock</label>
                    <select name="inStock" id="inStock">
                        <option value="yes">Yes</option>
                        <option value="no">No</option>
                    </select>
                    <label htmlFor="">Active</label>
                    <select name="active" id="active">
                        <option value="yes">Yes</option>
                        <option value="no">No</option>
                    </select>
                </div>
                <div className="productFormRight">
                    <div className="productUpload">
                        <img 
                        src="https://tse2-mm.cn.bing.net/th/id/OIP-C.aLXoQ-S7cbPVLMcC2NAyXQHaHa?pid=ImgDet&rs=1"
                         alt="" className="productUploadImg" />
                         <label htmlFor="file">
                             <Publish/>
                         </label>
                         <input type="file" id="file" style={{display:"none"}} />
                    </div>
                    <button className="productButton">Update</button>
                </div>
            </form>
        </div>
    </div>
  );
}
